<template>
  <div class="pagination_container">

    <el-config-provider :locale="zhCn">
      <el-pagination model-value:current-page="currentPage" model-value:page-size="pageSize" :page-sizes="pageAllSizes"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        @current-change="change" @size-change="sizeChange" :total="total" />
    </el-config-provider>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const small = ref(false)
const disabled = ref(false)

defineProps({
  // 当前页码
  currentPage: {
    type: Number,
    required: true
  },
  // 一页的显示多少条
  pageSize: {
    type: Number,
    required: true
  },
  // 总的条数
  pageAllSizes: {
    type: Array,
    required: true
  },
  // 总页数
  total: {
    type: Number,
    required: true
  },
  // 背景色
  background: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['pageChange', 'sizeChange'])
const change = (val: number) => {
  // console.log(val)
  emit('pageChange', val)
}

const sizeChange = (val: number) => {
  // console.log(val)
  emit('sizeChange', val)
}

</script>

<style lang="less" scoped>
.pagination_container {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}
</style>